<template>
  <div class="pagination-container">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        size="small"
        :background="background"
        :layout="layout"
        :page-sizes="pageSizes"
        :total="total"
        v-bind="$attrs"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
    />
  </div>
</template>

<script setup>
defineOptions({
  name: 'WsPagination',
})
const props = defineProps({
  total: {
    required: true,
    type: Number,
    default: 0
  },
  page: {
    type: Number,
    default: 1
  },
  limit: {
    type: Number,
    default: 10
  },
  pageSizes: {
    type: Array,
    default: () => [5, 10, 15, 20]
  },
  layout: {
    type: String,
    default: 'total, sizes, prev, pager, next'
  },
  background: {
    type: Boolean,
    default: true
  },
  autoScroll: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(['pagination', 'update:page', 'update:limit'])
const currentPage = computed({
  get() {
    return props.page
  },
  set(newValue) {
    emit('update:page', newValue)
  }
})
const pageSize = computed({
  get() {
    return props.limit
  },
  set(newValue) {
    emit('update:limit', newValue)
  }
})
const handleSizeChange = (val) => {
  emit('pagination', {page: currentPage.value, limit: val})
}
const handleCurrentChange = (val) => {
  emit('pagination', {page: val, limit: pageSize.value})
}

</script>
